// MemberCardBackgroundPicker.tsx
import React, { useState } from 'react';
import { Image, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';

type CardType = 'year' | 'season' | 'month' | 'single';

interface CardBackground {
  type: CardType;
  label: string;
  image: any; // 本地图片或网络图片
}

const cardBackgrounds: CardBackground[] = [
  { type: 'year', label: '年卡', image: require('../../assets/images/year_card.jpg') },
  { type: 'season', label: '季卡', image: require('../../assets/images/year_card.jpg') },
  { type: 'month', label: '月卡', image: require('../../assets/images/year_card.jpg') },
  { type: 'single', label: '次卡', image: require('../../assets/images/year_card.jpg') },
];

export default function MemberCardBackgroundPicker() {
  const [selectedType, setSelectedType] = useState<CardType | null>(null);

  const handleConfirm = () => {
    if (!selectedType) {
      alert('请先选择一个会员卡背景');
      return;
    }
    alert(`您选择的会员卡类型是：${selectedType}`);
  };

  return (
    <View style={styles.container}>
      <ScrollView horizontal={false} showsHorizontalScrollIndicator={false} style={styles.scroll}>
        {cardBackgrounds.map((card) => (
          <TouchableOpacity
            key={card.type}
            style={[
              styles.cardContainer,
              selectedType === card.type && styles.selectedCard,
            ]}
            onPress={() => setSelectedType(card.type)}
          >
            <Image source={card.image} style={styles.cardImage} />
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  scroll: {
    width:'100%',
    flexGrow: 0,
  },
  cardContainer: {
    height: 180,
    marginHorizontal: 10,
    borderRadius: 12,
    marginBottom:12,
    overflow: 'hidden',
    borderWidth: 2,
    borderColor: 'transparent',
    alignItems: 'center',
  },
  selectedCard: {
    borderColor: '#FFD700', // 金色边框高亮
  },
  cardImage: {
    resizeMode: 'cover',
  },
});